<script setup lang="ts">
import {ref} from 'vue'
import {UserOutlined, VideoCameraOutlined, UploadOutlined} from '@ant-design/icons-vue';
import {message} from "ant-design-vue";
import http from "axios";

defineProps<{ msg: string }>()
const onCollapse = (collapsed: boolean, type: string) => {
  console.log(collapsed, type);
};

const onBreakpoint = (broken: boolean) => {
  console.log(broken);
};

const test_user = () => {
  message.info('查询数据中')
  http.get('/user').then(res => {
    if (res.data == null || res.data === '') {
      message.error('暂无数据')
    }
  })
}

const selectedKeys = ref<string[]>(['1']);
</script>

<template>
  <a-layout>
    <a-layout-sider
        breakpoint="lg"
        collapsed-width="0"
        @collapse="onCollapse"
        @breakpoint="onBreakpoint"
        :style="{height: '100vh', background: '#fff' }"
    >
      <div class="logo">
        <img src="../assets/vue.svg" alt=""/>
      </div>
      <a-menu v-model:selectedKeys="selectedKeys" theme="light" mode="inline">
        <a-menu-item key="1">
          <video-camera-outlined/>
          <span class="nav-text">nav 1</span>
        </a-menu-item>
        <a-menu-item key="2">
          <user-outlined/>
          <span class="nav-text"><router-link to="/sys/sysUser">用户管理</router-link></span>
        </a-menu-item>
        <a-menu-item key="3">
          <upload-outlined/>
          <span class="nav-text">nav 3</span>
        </a-menu-item>
        <a-menu-item key="4">
          <user-outlined/>
          <span class="nav-text">nav 4</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header :style="{padding: 0, background: '#fff' }"/>
      <a-layout-content :style="{ margin: '24px 16px 0' }">
        <router-view/>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        Ant Design ©2018 Created by Ant UED
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<style scoped>
</style>
